body{
    background-color: white;
    display: flex;
    justify-content: center;
}
.a{
    position: relative;
    width: 1200px;
    height: 500px;
    background-color: rgba(255, 102, 102, 0);
    box-shadow: 0px 0px 5px 0px rgba(255, 87, 0,0.8) ;
    top: 60px;
    border-radius: 6px;
    overflow: hidden;
}
.b{
    position: absolute;
    width: 200px;
    height: 300px;
    left: 0;
    margin: 25px 50px;
    transition: 1s;
}
.b a{
    text-decoration: none;
    color: #fff;
    font: 900 28px '';
}
.b h2{
    font-size: 50px;
    transition: .5s 1s;
    opacity: 0;
    color: rgba(0, 51, 153, 0.66);
}
.b span{
    transition: .5s 1s;
    color: black;
    font-size:30px;
    position: absolute;
    top: 80px;
}
.c{
    position: absolute;
    top: -130px;
    right: -240px;
}
.d,.e{
    position: absolute;
    right: calc(var(--i)*95px);
    width: 45px;
    height: 500px;
    overflow: hidden;
    transform: rotateZ(130deg);
    background: rgb(244, 164, 96);
    transition: .5s .5s;
}
.e{
    left: -680px;
    top: -130px;
    width: 45px;
    background-color: rgba(0, 51, 153, 0.66);
}
.a:hover .b{
    transition: 1s .5s;
    left: 600px;
}
.a:hover .b span{
    transition: 1s .5s;
    top: 155px;
}
.a:hover .b h2{
    font-size: 50px;
    transition: 1s .5s;
    opacity: 1;
}
.f{
    font-size: 22px;
    width: 480px;
    height: 300px;
    position: absolute;
    margin: 40px;
    opacity: 0;
    transition: .5s;
}
.a:hover .f{
    transition: 1s 1.3s;
    opacity: 1;
}
.g{

}